<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/8/14
  Time: 17:29
  To change this template use File | Settings | File Templates.
--%>

<%--
  Created by IntelliJ IDEA.
  User: name
  Date: 2020/8/14
  Time: 17:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

/*
 需求：
      根据交易标中的不同阶段的数量进行一个统计，最终形成一个漏斗图（倒三角）
      将统计出来的阶段数量比较多的，往上排列
      将统计出来的阶段数量比较少的，往下排列
 例如：
      01资质审查 10条
      02需求分析 85条

      ....
      07成交    100条


  sql:
      按照阶段进行分组
      select
      stage,
      count(*)

      from tbl_tran

      group by stage

   npm:前端仓库
        install jquery
 */


%>

<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <script src="ECharts\echarts.min.js"></script>
    <script src="jquery/jquery-1.11.1-min.js"></script>
<script>

    $(function () {

        //页面加载完毕绘制图表

        getCharts();




    })
    function getCharts() {

        $.ajax({

            url:"workbench/transaction/getCharts.do",
            type:"get",
            dataType:"json",
            success:function (data) {

                /*
                data
                {"total":100,"dataList":[{},{},{}]}
                */
//alert("123");

                //基于准备好的dom，初始化echarts
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '交易漏斗图',
                        subtext: '统计交易数量的漏斗图'
                    },
                    /* tooltip: {
                         trigger: 'item',
                         formatter: "{a} <br/>{b} : {c}%"
                     },
                     toolbox: {
                         feature: {
                             dataView: {readOnly: false},
                             restore: {},
                             saveAsImage: {}
                         }
                     },
                     legend: {
                         data: ['展现','点击','访问','咨询','订单']
                     },*/

                    series: [
                        {
                            name:'漏斗图',
                            type:'funnel',
                            left: '10%',
                            top: 60,
                            //x2: 80,
                            bottom: 60,
                            width: '80%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            max: data.total,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data:data.dataList/* [

                       /!* {value: 60, name: '01资质审查'},
                        {value: 40, name: '02需求分析'},
                        {value: 20, name: '03价值建议'},
                        {value: 80, name: '04谈判复审'},
                        {value: 100, name: '05成交'}*!/
                    ]*/
                        }
                    ]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                /*********************************************/
                var myChart2 = echarts.init(document.getElementById('main2'));

                // 指定图表的配置项和数据
                var option2 = {
                    backgroundColor: '#2c343c',

                    title: {
                        text: '统计交易饼图',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },

                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            data: data.dataList.sort(function (a, b) { return a.value - b.value; }),
                            roseType: 'radius',
                            label: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            itemStyle: {
                                color: '#c23531',
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option2);
                /*******************************************/


            }



        })



    }


</script>

</head>


<body>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>

<div id="main3" style="width: 600px;height:400px;"></div>
</body>
</html>
